<template>
  <div class="resource">
    <header class="header">
      <span class="title">场景编辑演示</span>
    </header>
    <div v-if="!destroy" id="cesiumContainer" />
    <div class="home_ui">
      <scene-source @getApiModelById="getApiModelById"></scene-source>
      <handle-section v-if="showRight" :key="1" @handleScale="handleScale" @handleRotateX="handleRotateX" @handleRotateY="handleRotateY"
        @handleRotateZ="handleRotateZ" @handleTranslate="handleTranslate">
      </handle-section>
      <!-- <div class="yz-cesium-point" :style="yzStyle">
        <div class="yz-cesium-point-x">
          <div class="yz-cesium-point-y">
            <obj-tips v-if="tipsShow" :tipsData="tipsData" @tipsClose="tipsClose" @handleScale="handleScale" @handleRotate="handleRotate" @handleTranslate="handleTranslate"></obj-tips>
          </div>
        </div>
      </div> -->
    </div>
    <!-- <div class="footer-btn" @click="toVideoFusion">
      <img src="../../assets/vf_images/camera.png" />
      <div class="label">视频融合</div>
    </div> -->
  </div>
</template>

<script>
  import {
    getScene,
    getConfig,
    getBaseLayerGroup,
    getEntities,
    getEntity,
    getModelById,
    saveSceneModel
  } from '@/api/vf'
  import sceneSource from "./components/sceneSource.vue"
  import handleSection from "./components/handleSection.vue"
  import objTips from "./components/objTips.vue"
  export default {
    name: 'resource',
    components: {
      sceneSource,
      handleSection,
      objTips
    },
    data() {
      return {
        sceneId: 'e065698e249c416ab2b0c384b175b48d',
        showRight: false,
        scaleNum: 1,
        rotateX: 0,
        rotateY: 0,
        rotateZ: 0,
        objId: "",
        tipsShow: false,
        yzStyle: {},
        tipsData: {},
        listenPosition:{},
        dragControls:null,
        destroy:false
      }
    },
    mounted() {
      this.init()
    },
    beforeDestroy(){
      if(globe){
        globe.destroy()
      }
    },
    computed:{
    },
    watch:{
    },
    methods: {
      init: async function() {
        const _this = this
        let isOk = false
        let scene
        await getScene({
          sceneId: _this.sceneId
        }).then(rsp => {
          if (rsp.code === 200) {
            isOk = true
            scene = rsp.data
            _this.scene = scene
          }
        }).catch(() => {})
        if (!isOk) {
          return
        }
        createGlobe('cesiumContainer', scene)
        let configs
        await getConfig().then(rsp => {
          if (rsp.code === 200) {
            configs = rsp.data
            isOk = true
          }
        }).catch(() => {
          isOk = false
        }).then(() => {
          isOk = false
        })
      },
      getApiModelById: function(id) {
        let _this = this;
        /* 获取3d模型 */
        let param = {
          id: id
        }
        // console.log(id)
        getModelById(param).then(res => {
          // console.log("模型", res)
          if (200 !== res.code) {
            return
          }
          let model = res.data
          let nodeId = "968bc0a683ba482296a8a414739bf72d"
          new Cesium.DrawModel(globe.viewer, {
            leftClick: function(e) {
              var position = VFG.Util.getC3ToLnLa(globe.viewer, e);
              if (position) {
                var id = VFG.Util.getUuid();
                var primitive = globe.addModel({
                  id: id,
                  url: model.url,
                  name: model.name,
                  x: position.x,
                  y: position.y,
                  z: position.z,
                  type: model.type
                });

                var formData = {};
                formData['bizSceneModel.id'] = id;
                formData['bizSceneModel.sceneId'] = _this.sceneId;
                formData['bizSceneModel.modelId'] = model.id;
                formData['bizSceneModel.layerId'] = nodeId;
                formData['bizSceneModel.name'] = model.name;
                formData['bizSceneModel.type'] = model.type;
                formData['bizSceneModel.x'] = position.x;
                formData['bizSceneModel.y'] = position.y;
                formData['bizSceneModel.z'] = position.z;
                saveSceneModel(formData).then(() => {
                  if (200 === res.code) {
                    _this.$message({
                      type: 'success',
                      message: '添加成功!',
                      offset: 100
                    });
                  } else {
                    _this.$message({
                      type: 'error',
                      message: '添加失败!',
                      offset: 100
                    });
                    globe.removeModelById(id);
                  }
                })
              }
            },
            end: function() {

            }
          })
          globe.LEFT_CLICK_PRIMITIVE(function(e) {
            /* 左键点击 */
            // console.log("左键", e)
            _this.showRight = true
            if (e) {
              // _this.tipsShow = true
              _this.objId = e.id
              _this.tipsData = e
              // globe.removeListenerScreenPosition(_this.objId);
              // Object.assign(_this.tipsData, {
              //   datas: [{
              //     label: "缩放",
              //     key: "scale",
              //     icon: require("@/assets/vf_images/scale.png")
              //   }, {
              //     label: "旋转",
              //     key: "rotate",
              //     icon: require("@/assets/vf_images/rotate.png")
              //   }, {
              //     label: "平移",
              //     key: "translate",
              //     icon: require("@/assets/vf_images/translate.png")
              //   }]
              // })
              // let C3 = VFG.Util.getScreenToC3(globe.viewer, new Cesium.Cartesian2(_this.tipsData.position.x,
              //   _this.tipsData.position.y))
              // let pos = VFG.Util.getLnLaFormC3(globe.viewer,C3)
              // globe.addListenerScreenPosition({id:_this.objId,x:pos.x,y:pos.y,z:pos.z},function(e){
              //   _this.listenPosition = e
              //   _this.yzStyle = _this.getStyle(_this.listenPosition)
              //   })
            }
          })
          globe.RIGHT_CLICK_PRIMITIVE(function(e) {
            /* 右键点击 */
            // console.log("右键", e)
            _this.showRight = false
          })
        }).catch(() => {
          // console.log("请求错误")
        })
      },
      handleScale: function(num) {
        /* 缩放 */
        let _this = this
        // console.log("缩放倍数", num)
        _this.scaleNum = num
        globe.changeModelScale(_this.objId, _this.scaleNum)
      },
      handleRotateX: function(x) {
        /* 绕X轴旋转 */
        let _this = this
        // console.log("x轴", x)
        _this.rotateX = x
        globe.changeModelRoll(_this.objId, _this.rotateX)
      },
      handleRotateY: function(y) {
        /* 绕Y轴旋转 */
        let _this = this
        // console.log("y轴", y)
        _this.rotateY = y
        globe.changeModelHeading(_this.objId, _this.rotateY)
      },
      handleRotateZ: function(z) {
        /* 绕Z轴旋转 */
        let _this = this
        // console.log("z轴", z)
        _this.rotateZ = z
        globe.changeModelPitch(_this.objId, _this.rotateZ)
      },
      handleTranslate: function(e) {
        /* 开启平移功能 */
        let _this = this
        // console.log("平移功能", e)
        if (e) {
          this.$message({
            type: 'info',
            message: '已开启平移功能，请进行操作',
            offset: 100
          })
          let C3 = VFG.Util.getScreenToC3(globe.viewer, new Cesium.Cartesian2(_this.tipsData.position.x,
            _this.tipsData.position.y))
          let pos = VFG.Util.getLnLaFormC3(globe.viewer,C3)
          let position = Cesium.Cartesian3.fromDegrees(pos.x,pos.y,pos.z)
          _this.tipsData.position = position
          _this.dragControls = new VFG.OrbitControls(globe.viewer,{
            id: _this.tipsData.id,
            position:position,
            callback:function(e){
              var e = VFG.Util.getLnLaFormC3(globe.viewer,e);
              globe.changeModelPosition(_this.tipsData.id,e);
            }
          })
        } else {
          this.$message({
            type: 'info',
            message: '已关闭平移功能',
            offset: 100
          })
          _this.dragControls.destroy()
        }
      },
      // handleScale: function() {
      //   /* 缩放 */
      //   console.log("缩放")
      //   this.tipsClose()
      //   this.scaleNum = num
      //   globe.changeModelScale(_this.objId, _this.scaleNum)
      // },
      // handleRotate: function() {
      //   /* 旋转 */
      //   let _this = this
      //   console.log("旋转")
      //   this.tipsClose()
      //   _this.rotateX = x
      //   globe.changeModelRoll(_this.objId, _this.rotateX)
      // },
      // handleTranslate: function() {
      //   /* 开启平移功能 */
      //   console.log("平移功能")
      //   this.tipsClose()
      //   // new VFG.Controls.Drag
      // },
      // getStyle: function(param) {
      //   /* 设置点上弹出框位置 */
      //   if (param.x && param.y) {
      //     return "top:" + (param.y - 20) + "px;left:" + param.x + "px";
      //   }
      //   return "top:0px;left:0px";
      // },
      // tipsClose: function() {
      //   this.tipsShow = false;
      //   globe.removeListenerScreenPosition(this.objId);
      // },
      // toVideoFusion: function() {
      //   /* 页面跳转 */
      //   this.destroy = true
      //   globe.destroy()
      //   let routeData = this.$router.resolve({ path: '/'})
      //   window.open(routeData.href, '_blank');
      //   // setTimeout(()=>{
      //   //   this.$router.replace({
      //   //     path: '/'
      //   //   })
      //   // },2000)
      // }
    }
  }
</script>
<style lang="scss" scoped>
  .resource {
    width: 100%;
    height: 100%;
    display: block;
    overflow: hidden;
    #cesiumContainer {
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
    }

    >img {
      position: absolute;
      top: 0;
      right: 0;
      width: 100%;
      height: 100%;
      z-index: -1;
    }

    .header {
      font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
      font-size: 3.5rem;
      height: 7.5rem;
      // width: 100%;
      // background-color: #000;
      color: rgba(255, 255, 255, 0.8);
      text-align: center;
      background-image: url(../../assets/img/title.png);
      background-repeat: no-repeat;
      background-size: contain;
      position: absolute;
      top: 0;
      z-index: 9;
      width: 100%;

      .title {
        position: relative;
        top: 1rem
      }
    }

    .home_ui {
      pointer-events: none;
      position: absolute;
      z-index: 9;
      overflow: hidden;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: flex-start;
      top: 5rem;
      left: 0;
      right: 0;
      bottom: 0;

      >.yz-cesium-point {
        position: absolute;
        text-align: center;
        pointer-events: none;

        .yz-cesium-point-x {
          width: 100vw;
          height: 0;
          margin-left: -50vw;
          position: relative;

          .yz-cesium-point-y {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            display: flex;
            flex-direction: column;
            margin-bottom: 2.2rem;
            padding-bottom: 2rem;
          }
        }
      }
    }

    .footer-btn {
      width: 12rem;
      height: 4rem;
      // background-color: rgba(31,61,117,0.8);
      color: rgba(255, 255, 255, 0.8);
      font-weight: bold;
      font-size: 1.2rem;
      cursor: pointer;
      border-radius: 0.5rem;
      position: absolute;
      z-index: 9;
      overflow: hidden;
      display: flex;
      flex-direction: row;
      justify-content: space-around;
      align-items: center;
      top: 0;
      left: auto;
      right: 0;
      bottom: auto;

      &:hover {
        .label {
          color: #4788fb;
        }
      }

      >img {
        height: 2rem;
        width: 2rem;
        margin-left: 1.5rem;
      }

      .label {
        margin-right: 1.5rem;
      }
    }
  }
</style>
